import React, { useEffect, useState } from 'react';
import { Button, Spin, message, Typography, Space, Card } from 'antd';
import { PlusOutlined, DatabaseOutlined, InboxOutlined } from '@ant-design/icons';
import UnitFilterBar from './UnitFilterBar';
import UnitTable from './UnitTable';
import AddUnitModal from './AddUnitModal';
import { fetchUnitList } from '../../services/unit';
import './index.less';

const { Title } = Typography;

const UnitListPage: React.FC = () => {
    const [units, setUnits] = useState<any[]>([]);
    const [loading, setLoading] = useState(false);
    const [filters, setFilters] = useState({});
    const [pagination, setPagination] = useState({ current: 1, pageSize: 10, total: 0 });
    const [addModalVisible, setAddModalVisible] = useState(false);

    useEffect(() => {
        loadUnits(pagination.current, pagination.pageSize, filters);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [pagination.current, pagination.pageSize, filters]);

    const loadUnits = async (pageNum: number, pageSize: number, filters: any) => {
        setLoading(true);
        try {
            const res = await fetchUnitList({ pageNum, pageSize, ...filters }) as any;
            const data = res.data || res; // 兼容后端有无data包裹
            setUnits(data.records || []);
            setPagination((prev) => ({
                ...prev,
                total: data.total || 0,
                current: data.current || pageNum,
                pageSize: data.size || pageSize
            }));
        } catch (e) {
            message.error('加载单元列表失败');
        }
        setLoading(false);
    };

    const handleTableChange = (pagination: any) => {
        setPagination((prev) => ({
            ...prev,
            current: pagination.current,
            pageSize: pagination.pageSize,
        }));
    };

    return (
        <div className="unit-list-page" style={{ 
            padding: '24px',
            background: '#f5f5f5',
            minHeight: '100vh'
        }}>
            {/* 页面头部 */}
            <div style={{ 
                marginBottom: '24px',
                background: '#fff',
                padding: '24px',
                borderRadius: '12px',
                boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
                border: '1px solid #f0f0f0'
            }}>
                <div style={{ 
                    display: 'flex', 
                    justifyContent: 'space-between', 
                    alignItems: 'center',
                    marginBottom: '16px'
                }}>
                    <Space align="center">
                        <DatabaseOutlined style={{ fontSize: '24px', color: '#1890ff' }} />
                        <Title level={2} style={{ margin: 0, color: '#262626' }}>
                            单元管理
                        </Title>
                        <div style={{
                            background: 'linear-gradient(135deg, #e6f4ff 0%, #bae0ff 100%)',
                            color: '#1890ff',
                            padding: '4px 12px',
                            borderRadius: '16px',
                            fontSize: '12px',
                            fontWeight: '500',
                            border: '1px solid #91caff'
                        }}>
                            {pagination.total} 个单元
                        </div>
                    </Space>
                    <Button 
                        type="primary" 
                        size="large"
                        icon={<PlusOutlined />}
                        onClick={() => setAddModalVisible(true)}
                        style={{
                            borderRadius: '8px',
                            boxShadow: '0 4px 12px rgba(24, 144, 255, 0.3)',
                            fontSize: '14px',
                            fontWeight: '500'
                        }}
                    >
                        添加单元
                    </Button>
                </div>
                
                {/* 搜索筛选区域 */}
                <UnitFilterBar onChange={setFilters} />
            </div>

            {/* 表格区域 */}
            <Card
                style={{
                    borderRadius: '12px',
                    boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
                    border: '1px solid #f0f0f0'
                }}
                bodyStyle={{ padding: '24px' }}
            >
                <Spin spinning={loading}>
                    {units.length === 0 && !loading ? (
                        <div style={{ 
                            textAlign: 'center', 
                            padding: '60px 0',
                            color: '#8c8c8c'
                        }}>
                            <InboxOutlined style={{ 
                                fontSize: '64px', 
                                color: '#d9d9d9',
                                marginBottom: '16px'
                            }} />
                            <div style={{ fontSize: '16px', marginBottom: '8px' }}>
                                暂无单元数据
                            </div>
                            <div style={{ fontSize: '14px', color: '#bfbfbf' }}>
                                您可以点击右上角的"添加单元"按钮来创建第一个单元
                            </div>
                            <Button 
                                type="primary" 
                                icon={<PlusOutlined />}
                                onClick={() => setAddModalVisible(true)}
                                style={{ 
                                    marginTop: '16px',
                                    borderRadius: '6px'
                                }}
                            >
                                立即添加
                            </Button>
                        </div>
                    ) : (
                        <UnitTable
                            data={units}
                            pagination={pagination}
                            loading={loading}
                            onChange={handleTableChange}
                            onDelete={() => loadUnits(pagination.current, pagination.pageSize, filters)}
                        />
                    )}
                </Spin>
            </Card>
            
            <AddUnitModal
                visible={addModalVisible}
                onCancel={() => setAddModalVisible(false)}
                onSuccess={() => {
                    setAddModalVisible(false);
                    loadUnits(pagination.current, pagination.pageSize, filters);
                }}
            />
        </div>
    );
};

export default UnitListPage; 